<template>
 <div>
     <table>
         <tr>
             <td>书名</td>
             <td>价格</td>
             <td>操作</td>
         </tr>
         <tr v-for=" i in data">
             <td>{{i.name}}</td>
             <td>{{i.price}}</td>
             <td>
                 <button @click="update(i.id)">修改</button>
                 <button @click="del(i.id)">删除</button>
             </td>
         </tr>
     </table>

    <template>
        <el-table :data="data" border >
        <el-table-column type='index'></el-table-column>
        <el-table-column prop="name" label="书名"></el-table-column>
        <el-table-column prop="price" label="价格"></el-table-column>
        <el-table-column  label="操作">
            <el-button type="primary">修改</el-button>
            <el-button type="danger">删除</el-button>
        </el-table-column>
        </el-table>

    </template>


    


 </div>
</template>

<script>
export default {
 data() {
  return {
      data:"",
  }
 },
 components: {

 },
 mounted() {
     this.getbook()
    //  this.axios({
    //      url:'http://127.0.0.1:8000/getbook/',
    //      method:"get",
    //  }).then(res=>{
    //      this.data = res.data.data
    //  })
 },
 methods:{
     getbook(){
        this.axios({
            url:'http://127.0.0.1:8000/getbook/',
            method:"get",
        }).then(res=>{
            this.data = res.data.data
        })
     },

     del(id){
        this.axios({
            url:'http://127.0.0.1:8000/delbook/?id='+id,
            method:"get",
     }).then(res=>{
        this.getbook()
     })
    },

    update(id){
        this.$router({'name':'update',query:{'id':id}})
    },
    indexMethod(index){
        return index
    }
}
}
</script>
